<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '../router/router'
import { useStore } from 'vuex'
const loginForm = ref(null)
const labelPosition = ref('top')
const loginType = ref(1)
const form = ref({
  username: 'jack',
  password: '123',
  phoneNumber: ''
})
const store = useStore()

// 定义校验规则
const rules = reactive({
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
  phoneNumber: [{ required: true, message: '请输入电话号码', trigger: 'blur' }]
})
const clearForm = () => {
  // 切换登录方式时清空表单字段
  loginForm.value.clearValidate()
  form.value = {
    username: '',
    password: '',
    phoneNumber: '',
    code: ''
  }
}
const countdown = ref(60) // 倒计时秒数
const verificationCodeSent = ref(false) // 验证码是否已发送

const sendVerificationCode = () => {
  // 发送验证码逻辑
  axios.get('api/logincontroller/getCode/' + form.value.phoneNumber).then((res) => {
    if (res === false) {
      ElMessage.error('手机号错误')
    }
  })
  verificationCodeSent.value = true

  // 开始倒计时
  let remainingSeconds = countdown.value
  const timer = setInterval(() => {
    remainingSeconds--
    countdown.value = remainingSeconds

    if (remainingSeconds === 0) {
      clearInterval(timer)
      verificationCodeSent.value = false
    }
  }, 1000)
}
const login = () => {
  // 根据选择的登录方式执行登录操作
  if (loginForm.value && loginForm.value.validate()) {
    // 用户名登录逻辑
    axios.post('api/logincontroller/login/', form.value
    ).then((res) => {
      if (res.data == null) {
        ElMessage.error('登录失败')
      }
      const token = res.data.token
      if (token) {
        sessionStorage.setItem('token', token)
        sessionStorage.setItem('isFormLoginPage', 'true')
        store.dispatch('userStore/saveUserInfoAction', res.data.user)
        router.push('/ChatRoom')
      } else {
        ElMessage.error('登录失败，用户名或者密码错误')
      }
    }).catch((error) => {
      console.log(error)
    })
  }
}

</script>

<template>
  <div id="login">
    <div class="bg"></div>
    <el-row class="main-container">
      <el-col :lg="8" :xs="16" :span="10">
        <div class="top">
          <span class="title">在线IM系统</span>
        </div>
        <div class="box"></div>
        <div class="bottom">
          <div class="container">
            <p class="title">账号登录</p>
            <el-form :label-position="labelPosition" label-width="80px" v-model="form" :rules="rules" status-icon
              ref="loginForm">
              <el-form-item label="登录方式">
                <el-radio-group v-model="loginType" @change="clearForm">
                  <el-radio :label="1">用户名登录</el-radio>
                  <el-radio :label="2">电话号码登录</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="loginType === 1" label="用户名">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item v-if="loginType === 1" label="密码">
                <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
              </el-form-item>
              <el-form-item v-if="loginType === 2" label="电话号码">
                <el-input v-model="form.phoneNumber" placeholder="请输入电话号码"></el-input>
              </el-form-item>
              <el-form-item v-if="loginType === 2" label="验证码">
                <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
                <el-button class="get-verification-code" @click="sendVerificationCode" :disabled="verificationCodeSent">
                  {{ verificationCodeSent ? `${countdown}s后重新发送` : '获取验证码' }}
                </el-button>
              </el-form-item>
              <div class="submit">
                <el-button type="primary" class="row-login" @click="login">登录</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.top .el-icon {

  font-size: 50px;
}

.box {
  padding-bottom: 40px;
}

.container {
  margin-bottom: 32px;
}

.container .el-radio-group {
  margin: 30px 0px;
}

a:link {
  color: #ff962a;
  text-decoration: none;
}

#login {
  font-size: 14px;
  color: #000;
  background-color: #fff;
}

#login .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background-color: #b6bccdd1 !important;
}

#login .main-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#login .main-container .top {

  font-size: 30px;
  color: #ff962a;
  display: flex;
  justify-content: center;
}

#login .bottom {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#login .bottom .title {
  text-align: center;
  font-size: 30px;
}

.bottom .container .title {
  margin: 30px 0px;
  ;
}

.bottom .submit .row-login {
  width: 100%;
  background-color: #04468b;
  border-color: #04468b;
  margin: 20px 0px 10px 0px;
  padding: 15px 20px;
}

.bottom .submit {
  display: flex;
  justify-content: center;
}

.footer {
  margin-top: 50px;
  text-align: center;
}

.footer .msg1 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 15px;
}

.footer .msg2 {
  font-size: 14px;
  color: #e3e3e3;
  margin-top: 70px;
}

.bottom .options {
  margin-bottom: 40px;
  color: #ff962a;
  display: flex;
  justify-content: space-between;
}

.bottom .options>a {
  color: #ff962a;
}

.bottom .options .register span:nth-child(1) {
  color: #8C8C8C;
}
</style>
